<script setup lang="ts">
import { PropType } from 'vue'
import { MenuItem } from './types'
import { toLine } from '@/utils/index'

let props = defineProps({
  // 导航菜单的数据
  data: {
    type: Array as PropType<MenuItem[]>,
    required: true
  },
  // 默认选中的菜单
  defaultActive: {
    type: String,
    default: ''
  },
  // 是否是路由模式
  router: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <el-menu :default-active="defaultActive" :router="router" v-bind="$attrs">
    <template v-for="(item, index) in data">
      <el-menu-item v-if="!item.children || !item.children.length" :index="item.index">
        <component v-if="item.icon" :is="`el-icon${toLine(item.icon)}`" />
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu v-if="item.children && item.children.length" :index="item.index">
        <template #title>
          <component v-if="item.icon" :is="`el-icon${toLine(item.icon)}`" />
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item v-for="(subItem, subIndex) in item.children" :index="subItem.index" :key="subIndex">
          <component v-if="subItem.icon" :is="`el-icon${toLine(subItem.icon)}`" />
          <span>{{ subItem.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped></style>
